﻿@page "/chart/bubble"

@using Syncfusion.Blazor
@using Syncfusion.Blazor.Charts
@using PointRender

@inject NavigationManager NavigationManager
@inherits SampleBaseComponent;

<SampleDescription>
    <p>This <a target='_blank' href='https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/bubble-chart'>Blazor Bubble Chart</a> example visualizes the Literacy Rate and GDP Growth Rate of world countries by using bubble series in the chart. Tooltip shows the information about the countries.</p>
</SampleDescription>
<ActionDescription>
    <p>In this example, you can see how to render and configure the bubble type chart. The bubble chart is a type of chart that shows three dimensions of the data. Each points is drawn as a bubble, where bubble's size depends on <code>Size</code> property. You can also use <code>Fill</code> property to customize the data appearance.</p>
    <p><code>Tooltip</code> is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.</p>
    <p>More information about the bubble series can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/chart/chart-types/bubble'>documentation section</a>.</p>
</ActionDescription>

<div class="control-section">
    <SfChart Title="World Countries Details" Theme="@Theme">
        <ChartArea><ChartAreaBorder Width="0"></ChartAreaBorder></ChartArea>
        <ChartPrimaryXAxis Title="Literacy Rate" Minimum="60" Maximum="100" Interval="5">
        </ChartPrimaryXAxis>
        <ChartPrimaryYAxis Title="GDP Growth Rate" Minimum="0" Maximum="10" Interval="2.5">
        </ChartPrimaryYAxis>
        <ChartLegendSettings Visible="false"></ChartLegendSettings>
        <ChartTooltipSettings Enable="true" Format="${point.text}<br/>Literacy Rate : <b>${point.x}%</b> <br/>GDP Annual Growth Rate : <b>${point.y}</b><br/>Population : <b>${point.size} Billion</b>"></ChartTooltipSettings>
        <ChartSeriesCollection>
            <ChartSeries DataSource="@ChartPoints" Name="Pound" XName="Literacy" MinRadius="3" MaxRadius="8"
                         Size="BubbleSize" YName="GDPGrowth" Type="ChartSeriesType.Bubble">
                <ChartMarker>
                    <ChartDataLabel Name="TooltipMappingName"></ChartDataLabel>
                </ChartMarker>
            </ChartSeries>
        </ChartSeriesCollection>
        <ChartEvents OnPointRender="PointRender"></ChartEvents>
    </SfChart>
</div>

@code{

    private Theme Theme { get; set; }
    public List<BubbleChartData> ChartPoints { get; set; } = new List<BubbleChartData>
    {
        new BubbleChartData { Literacy = 92.2, GDPGrowth = 7.8, BubbleSize = 1.347, TooltipMappingName = "China" },
        new BubbleChartData { Literacy = 74, GDPGrowth = 6.5, BubbleSize = 1.241, TooltipMappingName = "India" },
        new BubbleChartData { Literacy = 90.4, GDPGrowth = 6.0, BubbleSize = 0.238, TooltipMappingName = "Indonesia" },
        new BubbleChartData { Literacy = 99.4, GDPGrowth = 2.2, BubbleSize = 0.312, TooltipMappingName = "US" },
        new BubbleChartData { Literacy = 88.6, GDPGrowth = 1.3, BubbleSize = 0.197, TooltipMappingName = "Brazil" },
        new BubbleChartData { Literacy = 99, GDPGrowth = 0.7, BubbleSize = 0.0818, TooltipMappingName = "Germany" },
        new BubbleChartData { Literacy = 72, GDPGrowth = 2.0, BubbleSize = 0.0826, TooltipMappingName = "Egypt" },
        new BubbleChartData { Literacy = 99.6, GDPGrowth = 3.4, BubbleSize = 0.143, TooltipMappingName = "Russia" },
        new BubbleChartData { Literacy = 96.5, GDPGrowth = 0.2, BubbleSize = 0.128, TooltipMappingName = "Japan" },
        new BubbleChartData { Literacy = 86.1, GDPGrowth = 4.0, BubbleSize = 0.115, TooltipMappingName = "MeLiteracy ico" },
        new BubbleChartData { Literacy = 92.6, GDPGrowth = 5.2, BubbleSize = 0.096, TooltipMappingName = "Philippines" },
        new BubbleChartData { Literacy = 61.3, GDPGrowth = 1.45, BubbleSize = 0.162, TooltipMappingName = "Nigeria" },
        new BubbleChartData { Literacy = 82.2, GDPGrowth = 3.97, BubbleSize = 0.7, TooltipMappingName = "Hong Kong" },
        new BubbleChartData { Literacy = 79.2, GDPGrowth = 4.9, BubbleSize = 0.162, TooltipMappingName = "Netherland" },
        new BubbleChartData { Literacy = 72.5, GDPGrowth = 4.5, BubbleSize = 0.7, TooltipMappingName = "Jordan" },
        new BubbleChartData { Literacy = 81, GDPGrowth = 2.5, BubbleSize = 0.21, TooltipMappingName = "Australia" },
        new BubbleChartData { Literacy = 66.8, GDPGrowth = 3.9, BubbleSize = 0.028, TooltipMappingName = "Mongolia" },
        new BubbleChartData { Literacy = 78.4, GDPGrowth = 2.9, BubbleSize = 0.231, TooltipMappingName = "Taiwan" }
    };

    protected override void OnInitialized()
    {
        this.SetTheme(null);
    }

    public void PointRender(PointRenderEventArgs args)
    {
        this.SetTheme(args);
    }

    private void SetTheme(PointRenderEventArgs args)
    {
        if (NavigationManager.Uri.IndexOf("material") > -1)
        {
            if (args == null)
                Theme = Theme.Material;
            else
                args.Fill = PointColor.MaterialColors[args.Point.Index % 10];
        }
        else if (NavigationManager.Uri.IndexOf("fabric") > -1)
        {
            if (args == null)
                Theme = Theme.Fabric;
            else
                args.Fill = PointColor.FabricColors[args.Point.Index % 10];
        }
        else if (NavigationManager.Uri.IndexOf("bootstrap") > -1)
        {
            if (args == null)
                Theme = Theme.Bootstrap;
            else
                args.Fill = PointColor.BootstrapColors[args.Point.Index % 10];
        }
        else if (NavigationManager.Uri.IndexOf("highcontrast") > -1)
        {
            if (args == null)
                Theme = Theme.HighContrast;
            else
                args.Fill = PointColor.HighContrastColors[args.Point.Index % 10];
        }
        else
        {
            if (args == null)
                Theme = Theme.Bootstrap4;
            else
                args.Fill = PointColor.BootstrapColors[args.Point.Index % 10];
        }
    }

    public class BubbleChartData
    {
        public double Literacy { get; set; }
        public double GDPGrowth { get; set; }
        public double BubbleSize { get; set; }
        public string TooltipMappingName { get; set; }
    }
}
